import type {
  FormType,
  SearchFormItemType,
  ColumnType,
  SearchRegionOptionsType
} from '~/pages/table-diagraming/types/index'
import { v4 as uuid } from 'uuid'
import complier from '../utils/complier'
import downloadBlob from '@/utils/downloadBlob'

const useDragramStore = defineStore('dragramStore', () => {
  // 检索内容
  const searchFormItems = ref<SearchFormItemType[]>([])
  const addSearchItem = (type: FormType, name: string) => {
    const temp: SearchFormItemType = {
      id: uuid(),
      type,
      name,
      modelKey: 'modelKey',
      placeholder: 'placeholder'
    }
    if (type === 'select') {
      temp.options = 'options'
    } else if (type === 'date') {
      temp.dateType = 'date'
      temp.dateFormat = 'YYYY-MM-DD'
    }

    searchFormItems.value.push(temp)
  }

  const addBatchSearchItems = (values: QueryItemType[]) => {
    values.forEach((item) => {
      searchFormItems.value.push({
        id: uuid(),
        type: 'input',
        name: item.name,
        modelKey: item.modelKey,
        placeholder: `请输入${item.name}`
      })
    })
  }

  const optionTrigger = ref(false)
  const selectFormItem = ref<SearchFormItemType>()
  const modalPosition = reactive({
    x: 0,
    y: 0
  })
  const hanldeSelectFormItem = (e: MouseEvent, val: SearchFormItemType) => {
    modalPosition.x = e.pageX
    modalPosition.y = e.pageY
    optionTrigger.value = true
    selectFormItem.value = val
  }

  // table表格内容
  const columnItems = ref<ColumnType[]>([
    // {
    //   id: uuid(),
    //   label: '操作',
    //   align: 'left',
    //   minWidth: 150,
    //   template: true
    // }
  ])
  const addColumnItem = (id: string) => {
    const idx = columnItems.value.findIndex((item) => item.id === id)
    const temp = {
      id: uuid(),
      label: 'label',
      prop: ['prop'],
      minWidth: 120,
      align: 'left',
      template: false
    }
    columnItems.value.splice(idx + 1, 0, temp)
  }

  // 批量添加解析出来的列
  const addBatchColumns = (columns: tableRowData[]) => {
    columns
      .filter((item) => item.show)
      .forEach((item) => {
        // console.log('item', item)
        const temp: ColumnType = {
          id: uuid(),
          label: item.title,
          prop: item.prop,
          minWidth: 120,
          align: 'left'
          // template: item.prop.length > 1 ? true : false
        }
        columnItems.value.push(temp)
      })
  }

  const deleteColumnItem = (id: string) => {
    const idx = columnItems.value.findIndex((item) => item.id === id)
    if (columnItems.value.length === 1) {
      ElMessage.warning('小主，最少保留一个列！')
      return
    }
    columnItems.value.splice(idx, 1)
  }

  const columnOptionTrigger = ref(false)
  const selectedColumn = ref<ColumnType>()
  const handleSelectColumn = (val: ColumnType) => {
    columnOptionTrigger.value = true
    selectedColumn.value = val
  }

  const searchRegionOptions = reactive<SearchRegionOptionsType>({
    type: 'grid',
    columnGap: 20,
    rowGap: 16,
    columns: 4
  })

  // 页面弹窗内容
  const interactionElements = ref<InteractionElementType[]>([])
  const addInteractionElement = (type: InteractionType, title: string) => {
    interactionElements.value.push({
      id: uuid(),
      title,
      type
    })
  }
  // 移除
  const removeInteractionElement = (id: string) => {
    const index = interactionElements.value.findIndex(
      (item: InteractionElementType) => item.id === id
    )
    interactionElements.value.splice(index, 1)
  }

  // 下载
  const fileName = ref('')
  const down = () => {
    if (!fileName.value) {
      ElMessage.warning({ message: '请输入文件名', grouping: true, showClose: true })
      return
    }
    if (searchFormItems.value.length === 0) {
      ElMessage.warning({
        message: '请添加检索区域内容',
        grouping: true,
        showClose: true
      })
      return
    }
    const tablepageTemplate = complier(
      searchFormItems.value,
      columnItems.value,
      interactionElements.value
    )
    // console.log(tablepageTemplate)
    downloadBlob(tablepageTemplate, fileName.value + '.vue')
  }

  // 编译模板
  const getPageFileContent = () => {
    if (!fileName.value) {
      ElMessage.warning({ message: '请输入文件名', grouping: true, showClose: true })
      return ''
    }
    if (searchFormItems.value.length === 0) {
      ElMessage.warning({
        message: '请添加检索区域内容',
        grouping: true,
        showClose: true
      })
      return ''
    }
    const tablepageTemplate = complier(
      searchFormItems.value,
      columnItems.value,
      interactionElements.value
    )
    return tablepageTemplate
  }

  return {
    modalPosition,
    searchRegionOptions,
    searchFormItems,
    addSearchItem,
    optionTrigger,
    selectFormItem,
    hanldeSelectFormItem,
    down,
    columnItems,
    addColumnItem,
    deleteColumnItem,
    columnOptionTrigger,
    selectedColumn,
    handleSelectColumn,
    addBatchColumns,
    addBatchSearchItems,
    fileName,
    getPageFileContent,
    interactionElements,
    addInteractionElement,
    removeInteractionElement
  }
})

export default useDragramStore
